<template>
  <view >
    <bar-title bgColor="bg-white" :is-back="false">
      <block slot="content">个人资料</block>
    </bar-title>
    <form>
      <view class="cu-form-group margin-top">
        <view class="title">真实姓名</view>
        <input placeholder="请输入真实姓名" name="input" autocomplete="off" v-model="approve.name" maxlength="10" :disabled="type != 2"/>
      </view>
      <view class="cu-form-group">
        <view class="title">手机号</view>
        <input placeholder="请输入手机号" name="input" disabled  v-model="approve.mobile"/>
        <button class='cu-btn bg-blue shadow round' open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">获取手机号</button>
      </view>
<!--      <view class="cu-form-group">-->
<!--        <view class="title">工作单位</view>-->
<!--        <input placeholder="请输入工作单位" name="input" v-model="approve.work_unit" maxlength="20" autocomplete="off" :disabled="type != 2" />-->
<!--      </view>-->
<!--      <view class="cu-form-group">-->
<!--        <view class="title">工作单位地址</view>-->
<!--        <input placeholder="请输入工作单位地址" name="input" v-model="approve.work_address" maxlength="20" autocomplete="off" :disabled="type != 2" />-->
<!--      </view>-->
<!--      <view class="cu-form-group">-->
<!--        <view class="title">入职时间</view>-->
<!--        <picker mode="date" :value="approve.hiredate" :start="startDate" :end="endDate" @change="DateChange" :disabled="type != 2">-->
<!--          <view class="picker">-->
<!--            {{approve.hiredate ? approve.hiredate : '请选择入职时间'}}-->
<!--          </view>-->
<!--        </picker>-->
<!--      </view>-->

<!--      <view class="cu-form-group">-->
<!--        <view class="title">居住地</view>-->
<!--        <input placeholder="请输入居住地" name="input" v-model="approve.address" maxlength="20" autocomplete="off" :disabled="type != 2"/>-->
<!--      </view>-->
<!--      <view class="cu-form-group">-->
<!--        <view class="title">居住状况</view>-->
<!--        <picker @change="addressChange" :value="addressIndex" :range="addressList" range-key="label" :disabled="type != 2">-->
<!--          <view class="picker">-->
<!--            {{addressIndex>-1?addressList[addressIndex].label:'请选择居住地'}}-->
<!--          </view>-->
<!--        </picker>-->
<!--      </view>-->
<!--      <view class="cu-form-group">-->
<!--        <view class="title">居住地邮编</view>-->
<!--        <input placeholder="请输入居住地邮编" name="input" v-model="approve.resi_pc" maxlength="20" autocomplete="off"  :disabled="type != 2"/>-->
<!--      </view>-->
<!--      <view class="cu-form-group">-->
<!--        <view class="title">电子邮箱</view>-->
<!--        <input placeholder="请输入电子邮箱" name="input" v-model="approve.email" maxlength="20" autocomplete="off" :disabled="type != 2"/>-->
<!--      </view>-->
      <view class="cu-form-group " style="border-bottom: 0.5px solid #eee;">
        <view class="title">身份证号码</view>
        <input placeholder="请输入身份证号码" name="input" v-model="approve.identity"  autocomplete="off" :disabled="type != 2"/>
      </view>
      <!-- 身份证照片 -->
      <view class="IdCard-photo">
        <!-- 照片容器 -->
        <view class="IdCard-photo-container clearfix">
          <view class="identity_front"
                style="background-image:url(/static/style-one/sfzzm.jpg);
                background-repeat: no-repeat;
                background-size: 100% 100%;"
                @click="upidentity_front"

          >
            <view class="IdCard-photo-img" v-if="approve.identity_front" >
              <image :src="imgUrl + approve.identity_front" mode="aspectFill"></image>
            </view>
            <!-- 认证没有通过 需要重新上传 -->
            <view class="Upload-again" v-if="approve.type == 0" @click="upidentity_front">
              <text>重新上传</text>
            </view>
          </view>
          <view class="identity_reverse"
                style="background-image:url(/static/style-one/sfzfm.jpg);
                background-repeat: no-repeat;
                background-size: 100% 100%;"
                @click="upidentity_reverse"
          >
            <view class="IdCard-photo-img" v-if="approve.identity_reverse">
              <image :src="imgUrl + approve.identity_reverse" mode="aspectFill"></image>
            </view>
            <!-- 认证没有通过 需要重新上传 -->
            <view class="Upload-again" v-if="approve.type == 0" @click="upidentity_reverse">
              <text>重新上传</text>
            </view>
          </view>
        </view>

        <!-- 身份证照片要求 -->
        <view class="IdCard-photo-requirements">
          <view class="title">
            <text>请拍摄身份证原件</text>
          </view>

          <!-- 身份证照片示例 -->
          <view class="IdCard-photo-sample-module">
            <view class="IdCard-photo-sample clearfix">
              <view class="IdCard-photo-sample-item">
                <view class="img-box">
                  <image v-if="imageUrl" :src="imageUrl + 'shenfenzheng/shen-1.png'" mode="widthFix"></image>
                </view>
                <text><u-icon name="checkmark" color="#19BE6B" size="24"></u-icon>标准</text>
              </view>
              <view class="IdCard-photo-sample-item">
                <view class="img-box">
                  <image v-if="imageUrl" :src="imageUrl + 'shenfenzheng/shen-2.png'" mode="widthFix"></image>
                </view>
                <text><u-icon name="close" color="#DD4A68" size="24"></u-icon>缺边</text>
              </view>
              <view class="IdCard-photo-sample-item">
                <view class="img-box">
                  <image v-if="imageUrl" :src="imageUrl + 'shenfenzheng/shen-3.png'" mode="widthFix"></image>
                </view>
                <text><u-icon name="close" color="#DD4A68" size="24"></u-icon>模糊</text>
              </view>
              <view class="IdCard-photo-sample-item">
                <view class="img-box">
                  <image v-if="imageUrl" :src="imageUrl + 'shenfenzheng/shen-4.png'" mode="widthFix"></image>
                </view>
                <text><u-icon name="close" color="#DD4A68" size="24"></u-icon>闪光</text>
              </view>

            </view>
          </view>

        </view>

      </view>
      <!-- 上传芝麻芝麻信用截图 -->
      <view class="credit">
        <view class="agreement">
          <checkbox value="cb" :checked="mpChecked"  class="checkboxItem" @change='changeHandle'/>
          <text class="navigator-hover"  @click="mpAgreementClickHandle">《个人征信授权》</text>
        </view>
      </view>
      <view class="bth-box">
        <button type="warn" @click="submit" :loading="submitLoading">保存修改</button>
      </view>
    </form>

    <!--  征信授权弹窗  -->
    <u-popup v-model="mpAgreement" mode="bottom" :closeable="false" border-radius="14" height="80%">
      <view class="content">
        <view class="body">
          <view>
            <u-tabs name="cate_name" count="cate_count" :list="list" :current="current" @change="change"></u-tabs>
          </view>

          <view class="scroll-view-heider-box">
            <scroll-view :scroll-y="true" style="height: 100%;">
              <u-parse :html="Parse1" v-if="current===0"></u-parse>
              <u-parse :html="Parse2" v-if="current===1"></u-parse>
            </scroll-view>
            <!-- 确定按钮 -->
            <view class="confrim-btn">
              <u-button type="error"  shape="circle" @click="mpAgreementHandle" >我已阅读并同意</u-button>
            </view>
          </view>
        </view>
      </view>
    </u-popup>

  </view>
</template>

<script>
import barTitle from "../../components/common/bar-title";
import { mapState } from 'vuex'
import {getApprove, getMobile, getPhone, getUser, saveUserApprove, userCertifyInitialize} from "../../common/http";
export default {
  components: {
    barTitle
  },
  computed: {
    ...mapState(['imgUrl', 'imageUrl']), // 图片链接
  },
  data() {
    return {
      approve: {
        name: '',
        mobile:'',
        work_unit:'',
        work_address:'',
        hiredate:'',
        address:'',
        resi_status:'',
        resi_pc:'',
        email:'',
        identity:'',
        identity_front:'',
        identity_reverse:'',
      },
      startDate: '',
      endDate:'',
      mpChecked: false, // 非微信端使用
      addressList:[
          {
            value: 1,
            label: '自置'
          }, {
            value: 2,
            label: '按揭'
          },
          {
            value: 3,
            label: '亲属楼宇'
          },
          {
            value: 4,
            label: '集体宿舍'
          },
          {
            value: 5,
            label: '租房'
          },
          {
            value: 6,
            label: '共有住宅'
          },
          {
            value: 12,
            label: '借住'
          }
    ],
      addressIndex:-1,
      mpAgreement:false,
      list: [
        {cate_name: '个人信用信息查询及报送授权书'},
        {cate_name:'用户授权协议书'}
      ],
      current:0,
      Parse1:'',
      Parse2:'',
      submitLoading: false,
      userId: uni.getStorageSync('userId'),
      type:2
    }
  },
  onLoad() {
    this.startDate = this.getDate("start");
    this.endDate = this.getDate("end");
    this.getParse();
    this.getApprove();
  },
  methods: {
    getParse(){
      getPhone({type:6}).then(res => {
        if (res.data.code === 0) {
          this.Parse1 = res.data.data.content;
        }
      });
      getPhone({type:7}).then(res => {
        if (res.data.code === 0) {
          this.Parse2 = res.data.data.content;
        }
      });
    },
    getApprove(){
      getApprove({user_id: this.userId}).then(res => {
        if (res.data.code === 0) {
          this.type = res.data.data.type
          this.approve = res.data.data.approve ? res.data.data.approve : this.approve;
          this.approve.mobile = res.data.data.mobile
        }
      });
    },
    async submit() {
      if (!this.approve.name) {
        my.showToast({
          type: 'none',
          content: '请输入姓名',
          duration: 2000,
        });
        return;
      }
      if (!this.approve.mobile) {
        my.showToast({
          type: 'none',
          content: '请输入手机号',
          duration: 2000,
        });
        return;
      }
      if (!this.approve.identity) {
        my.showToast({
          type: 'none',
          content: '请输入身份证号',
          duration: 2000,
        });
        return;
      }
      if (!this.approve.identity_front) {
        my.showToast({
          type: 'none',
          content: '请上传身份证正面',
          duration: 2000,
        });
        return;
      }
      if (!this.approve.identity_reverse) {
        my.showToast({
          type: 'none',
          content: '请上传身份证反面',
          duration: 2000,
        });
        return;
      }
      if (!this.mpChecked) {
        my.showToast({
          type: 'none',
          content: '请勾选用户授权协议书',
          duration: 2000,
        });
        return;
      }
      this.submitLoading = true;
      const that = this;
      // saveUserApprove({...that.approve,user_id: that.userId,certify_id:'12345'}).then(res2=>{
      //   if(res2.data.code == 0){
      //     uni.showToast({
      //       title: '提交成功,请等待审核',
      //       icon: 'none',
      //       duration: 2000
      //     });
      //     //返回上一页
      //     my.navigateBack();
      //   }
      // })
      userCertifyInitialize(this.approve).then(res => {
        if(res.data.code == 0){
          //唤起支付宝认证
          my.startAPVerify({
            url: res.data.data.certifyUrl,
            certifyId: res.data.data.certify_id,
            success: function (res1) {
              if(res1.resultStatus === "9000"){
                saveUserApprove({...that.approve,user_id: that.userId,certify_id:res.data.data.certify_id}).then(res2=>{
                    if(res2.data.code == 0){
                      uni.showToast({
                        title: '提交成功,请等待审核',
                        icon: 'none',
                        duration: 2000
                      });
                      //返回上一页
                      my.navigateBack();
                    }
                })
              }
            },
          });
        }
      });
    },
    // 上传人像面身份证
    upidentity_front(){
      let that = this;
      my.chooseImage({
        chooseImage: 1,
        success: res => {
          const path = res.apFilePaths[0];
          my.uploadFile({
            url: that.imgUrl + '/api/file/upload',
            fileType: 'image',
            fileName: 'file_input',
            filePath: path,
            success: res1 => {
              that.approve.identity_front = JSON.parse(res1.data).data;
            },
            fail: function(res1) {
              my.alert({ title: '上传失败' });
            },
          });
        },
      });
    },
    // 上传国徽面 身份证
    upidentity_reverse(){
      let that = this;
      my.chooseImage({
        chooseImage: 1,
        success: res => {
          const path = res.apFilePaths[0];
          my.uploadFile({
            url: that.imgUrl + '/api/file/upload',
            fileType: 'image',
            fileName: 'file_input',
            filePath: path,
            success: res1 => {
              that.approve.identity_reverse = JSON.parse(res1.data).data;
            },
            fail: function(res1) {
              my.alert({ title: '上传失败' });
            },
          });
        },
      });
    },
    upSesameImg() {
      let that = this;
      my.chooseImage({
        chooseImage: 1,
        success: res => {
          const path = res.apFilePaths[0];
          my.uploadFile({
            url: that.imgUrl + '/api/file/upload',
            fileType: 'image',
            fileName: 'file_input',
            filePath: path,
            success: res1 => {
              this.approve.sesame_img = JSON.parse(res1.data).data;
            },
            fail: function (res1) {
              my.alert({title: '上传失败'});
            },
          });
        },
      });
    },
    DateChange(e) {
      //把/替换成-
      this.approve.hiredate = e.detail.value.replace(/\//g, "-")
    },
    getPhoneNumber(){
      my.getPhoneNumber({
        success: (res) => {
          let encryptedData = res.response;
          getMobile({encrys:encryptedData}).then(res=>{
            if(res.data.code == 0){
              this.approve.mobile = res.data.data;
            }
          })
        }
      })
    },
    addressChange(e){
      console.log(e)
      this.addressIndex = e.detail.value
      this.approve.resi_status = this.addressList[e.detail.value].value
    },
    getDate(type) {
      const date = new Date();
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();

      if (type === 'start') {
        year = year - 60;
      } else if (type === 'end') {
        year = year + 2;
      }
      month = month > 9 ? month : '0' + month;
      day = day > 9 ? day : '0' + day;
      return `${year}-${month}-${day}`;
    },
    changeHandle(e){
      this.mpChecked = e.detail.value
    },
    mpAgreementClickHandle(){
      // 弹窗
      this.mpAgreement = !this.mpAgreement
    },
    change(index) {
      this.current = index;
    },
    mpAgreementHandle(){
      this.mpChecked = true
      this.mpAgreement = false
    },
  }
}
</script>

<style>
page {
  background-color: #fff;
}
</style>

<style lang="scss" scoped>
.content{
  height: 100%;
  padding: 0 10px;
  padding-top: 10px;
  overflow: hidden;
  position: relative;
  .scroll-view-heider-box{
    height: 60vh;
    .zhengxin{
      width: 100%;
      image{
        width: 100%;
      }
      img{
        width: 100%;
      }
    }
  }
  .confrim-btn{
    padding-top: 2vh;
  }
}
.cu-form-group .title {
  min-width: calc(4em + 15px);
}
.cu-form-group input{
  text-align: right;
}
.IdCard-photo {
  width: 100%;
  padding: 0 15px;
  .IdCard-photo-title {
    line-height: 1.5;

    .title {
      font-weight: 700;
    }

    .p {
      font-size: 12px;
      color: #999;

      .Must {
        color: red;
      }
    }
  }

  // 照片容器
  .IdCard-photo-container {
    margin-top: 10px;

    .identity_front,
    .identity_reverse {
      width: 48%;
      height: 130px;
      position: relative;
      background-color: #f1f1f1;
      display: flex;
      justify-content: center;
    }

    .identity_front {
      float: left;
    }

    .identity_reverse {
      float: right;
    }

    .iconfont-icon-box {
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      .u-icon {
        width: 50px;
        height: 50px;
        background-color: #bfbcbc;
        justify-content: center;
        border-radius: 50%;
        margin-bottom: 10px;
      }
    }



    .IdCard-photo-img {
      width: 90%;
      height: 100%;

      image {
        width: 100%;
        height: 100%;
      }
    }


    // 重新上传
    .Upload-again{
      width: 100%;
      position: absolute;
      bottom: 0;
      left: 0;
      text-align: center;
      padding: 5px;
      color: #2979FF;
      background-color: rgba(0,0,0, .5);


    }

  }

  // 上传身份证照片要求
  .IdCard-photo-requirements {
    .title {
      display: flex;
      justify-content: space-between;
      margin: 20px 0;

      text {
        &:last-child {
          font-size: 24rpx;
          color: #2979ff;
        }
      }

      .u-icon {
        background-color: #2979ff;
        border-radius: 50%;

      }
    }

    // 身份证照片示例
    .IdCard-photo-sample-module {
      width: 100%;
      margin-bottom: 50px;
      .IdCard-photo-sample {
        width: 100%;
        display: flex;
        justify-content: space-between;
        .IdCard-photo-sample-item {
          width: 24%;
          text-align: center;
          .img-box {
            width: 100%;
            image{
              width: 100%;
            }
          }

        }
      }
    }
  }

}
.credit{
  padding: 40rpx 30rpx;
  .navigator-hover{
    color: #007AFF;
  }
}
.bth-box {
  margin: 30rpx;
  margin-bottom: 50px;
}
</style>
